<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>友链</title>
    <link rel="stylesheet" th:href="@{/css/amazeui.css}">
    <link rel="stylesheet" th:href="@{/css/header.css}">
    <script th:src="@{/js/jquery.js}"></script>
</head>
<style>
    a{
        margin-left: 5px;
        font-weight: 400;
        font-size: 17px;
    }
</style>
<body>

<!--引入公有头部-->

<div th:replace="~{commons/header::topbar}"></div>

<!--主体部分-->
<div class="am-u-sm-4 am-u-lg-offset-4" style="margin-top: 80px;">

    <div class="title">
        <h1 style="font-weight: 400;line-height: 1.6;color:gray;"><span style="color: #1f90ff;font-size: 25px;">#</span> 友情链接</h1>
    </div>

    <div class="firend-link am-u-sm-4" th:each="friendLink : ${friendLinks}" style="margin-top: 15px;float: left">
            <span class="am-icon-anchor" style="margin-left: 25px;color: red"></span>
            <a th:href="${friendLink.getUrl()}" target="_blank" th:text="${friendLink.getBlogName()}"></a>
    </div>
</div>
</div>

<div class="am-u-sm-12" style="margin-top: 590px;">
    <!--引用脚部-->
    <div th:replace="commons/footer::footer" style="margin-top: 100px;"></div>
</div>

</body>
<script type="text/javascript" th:inline="javascript">
    //上边框头像跟个人信息栏头像同步地址
    $("#topbar_img").attr('src','http://localhost:8080/'+[[${topbar_imgUrl}]]);
</script>
</html>